<template>
    <div>
        <div><h1>活动列表</h1></div>
        <div>
            <el-form
                :inline="true"
                :model="searchForm"
                class="demo-form-inline"
            >
                <el-form-item label="关键字">
                    <el-input
                        v-model="searchForm.keyWord"
                        placeholder="请输入关键字"
                        clearable
                    />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="loadActiveList"
                        >搜索</el-button
                    >
                    <el-button type="primary" @click="onAddActive"
                        >添加抽奖活动</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="activeList" stripe style="width: 100%">
                <el-table-column prop="activeId" label="活动ID" width="100" />
                <el-table-column
                    prop="activeName"
                    label="活动名称"
                    width="120"
                />
                <el-table-column
                    prop="beginTime"
                    label="开始时间"
                    width="160"
                />
                <el-table-column prop="endTime" label="截止时间" width="160" />
                <el-table-column prop="joinUser" label="参与用户" width="100" />
                <el-table-column
                    prop="freeTimes"
                    label="免费抽奖次数"
                    width="120"
                />
                <el-table-column prop="winUser" label="中奖名单" width="100" />
                <el-table-column prop="winList" label="中奖记录" width="100" />
                <el-table-column
                    prop="statusName"
                    label="活动状态"
                    width="100"
                />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="primary"
                            v-if="scope.row.activeStatus == 0"
                            @click="onJoinActive(scope.row)"
                        >
                            免费抽奖
                        </el-button>
                        <el-button
                            size="small"
                            type="primary"
                            @click="onJoinScoreActive(scope.row)"
                        >
                            积分抽奖
                        </el-button>
                        <el-button
                            size="small"
                            type="success"
                            @click="onShowRecord(scope.row)"
                        >
                            抽奖记录
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 20px">
            <el-pagination
                v-model:current-page="searchForm.pageNum"
                v-model:page-size="searchForm.pageSize"
                :page-sizes="[2, 4, 6, 8]"
                size="small"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { getActiveList,joinActive,getUserInfo } from "@/api/api";
import { joinActiveByScore } from "@/api/win"
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const activeList = ref([]);
const searchForm = ref({
    pageNum: 1,
    pageSize: 2,
    keyWord: null,
});
const total = ref(0);
const user = ref({
    userScore: 0, // 用户的积分
});

// 查看抽奖记录
const onShowRecord = (row: any) => {
    console.log("onShowRecord", row);
    sessionStorage.setItem("activeId", row.activeId);
    router.push('/home/record');
};


// 添加抽奖活动
const onAddActive = () => {
    console.log("onAddActive");
    router.push('/home/addactive');
};

// 参与抽奖
const onJoinActive = (row: any) => {
    console.log("onJoinActive", row);
    joinActive(row.activeId).then((res) => {
        if (res.data.code == 200) {
            ElMessage.success("参与成功");
            console.log(res.data.data);
        }
        else {
            ElMessage.error(res.data.msg);
        }
    })
};

// 积分抽奖
const onJoinScoreActive = (row: any) => {
    // 保存抽奖活动的信息
    sessionStorage.setItem("activeId", row.activeId);

    // 跳转到抽奖页面
    router.push('/home/join');

    // console.log("onJoinScoreActive", row);
    // joinActiveByScore(row.activeId).then((res) => {
    //     if (res.data.code == 200) {
    //         ElMessage.success(res.data.msg);
    //         console.log(res.data.data);
    //         // 重新加载用户信息和活动列表
    //         loadActiveList();
    //     }
    //     else {
    //         ElMessage.error(res.data.msg);
    //     }
    // })
}

// 改变每页显示的记录数
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
    searchForm.value.pageSize = val;
    loadActiveList();
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    searchForm.value.pageNum = val;
    loadActiveList();
};

// 获取活动列表
const loadActiveList = () => {
    // 获取当前的用户信息
    getUserInfo().then((res) => {
        if (res.data.code == 200) {
            user.value = res.data.data;
        }
    })

    // 获取活动列表
    getActiveList(searchForm.value).then((res) => {
        if (res.data.code == 200) {
            activeList.value = res.data.data.records;
            total.value = res.data.data.total;
        }
    });
};

// 页面加载钩子函数
onMounted(() => {
    // 获取活动列表
    loadActiveList();
});
</script>

<style scoped></style>
